<template>
    <div class='flex-row' id="box">
      <div class="flex tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top">
          <h3>Aote</h3>
          <div class="span">
            <resource-tree :functions='functions' :userid='userid' is-click="false" v-if="treeOrIcon"></resource-tree>
          </div>

        <div class="tree-flex-footer">
            <!-- <a @click="refresh()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">刷新菜单</span></a> -->
            <a @click="refresh()"><span><img :src="imgs.open" alt="">刷新菜单</span></a>
            <dropdown>
              <button type="button" data-toggle="dropdown">
                <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
              </button>
              <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
                <li>系统信息及设置</li>
                <li>2017年4月6日 15:32:54</li>
                <li>修改密码</li>
                <li>系统版本:1.0.0</li>
              </ul>
            </dropdown>
            <!-- <a href="home.html" onclick="return confirm('您确定要退出系统吗？');"> -->
            <a @click='$back()'>
              <img :src="imgs.out" alt="" ><span v-if="treeOrIcon">返回上级</span>
            </a>
        </div>
      </div>

      <div class="line" id="line" v-show="treeOrIcon"></div>

      <div class="flex right-bg" id="bottom">
        <!-- <header class="right-header" v-if="headerHint">
          <span>当前总收费:
            <h4>{{ value }}</h4>
            元</span>
          <span>{{functions.name}}</span>
        </header> -->
        <div class="span">
          <dynamic :comps='[]' name='resmain'></dynamic>
        </div>

      </div>
    </div>
</template>

<script>
import * as Util from '../Util'

export default {
  title: '主界面',
  props: ['data'],
  data () {
    return {
      // 左侧树下部三个小图标
      imgs: {
        open: './static/treeopen.png',
        set: './static/treeset.png',
        out: './static/treeout.png'
      },
      treeOrIcon: true,
      treeWidth: 300,
      headerHint: true, // 右侧顶部提示信息
      routeName: 'resmain',
      value: 25645.26,
      functions: Util.f
    }
  },
  ready () {
    this.userid = this.$login.f.id
    // 获取刷新数据
    this.refresh()

    let oBox = this.getElement("box")
		let	oTop = this.getElement("top")
		let	oBottom = this.getElement("bottom")
		let oLine = this.getElement("line")
    let that = this
				oLine.onmousedown = function(e) {
					let disX = (e || event).clientX
					oLine.left = oLine.offsetLeft
					document.onmousemove = function(e) {
						let iT = oLine.left + ((e || event).clientX - disX)
            var e = e || window.event
						let tarnameb = e.target || e.srcElement
						let maxT = oBox.clientWight - oLine.offsetWidth
						oLine.style.margin = 0
						iT < 0 && (iT = 0)
						iT > maxT && (iT = maxT)
						oLine.style.left = oTop.style.width = iT + "px"
						oBottom.style.width = oBox.clientWidth - iT + "px"
            console.log(iT)
            that.$set('treeWidth', iT)
            console.log("that.treeWidth-->"+that.treeWidth)
						return false
					}
					document.onmouseup = function() {
						document.onmousemove = null
						document.onmouseup = null
						oLine.releaseCapture && oLine.releaseCapture()
					}
					oLine.setCapture && oLine.setCapture()
					return false
				}
  },
  methods: {
    refresh () {
      Util.loadRightResource(this)
    },
    getElement(id) {
      return document.getElementById(id)
    },
    changeShow () {
      this.treeOrIcon = !this.treeOrIcon
      let oBox = this.getElement("box")
  		let	oTop = this.getElement("top")
  		let	oBottom = this.getElement("bottom")
  		let oLine = this.getElement("line")
      if (this.treeOrIcon) {
        // oLine.style.left = oTop.style.width = 300 + "px"
        oTop.style.width = this.treeWidth + "px"
        oBottom.style.width = oBox.clientWidth - this.treeWidth + "px"
      }else {
        oLine.style.left = oTop.style.width = 60 + "px"
        oBottom.style.width = oBox.clientWidth - 60 + "px"
      }

    }
  },
  computed: {
    nowDate () {
      return Util.getNowDate()
    }
  }
}
</script>
<style scoped>
  /*右侧区域的背景*/
  .right-bg {
    width: 100%;
    flex: 1;
    /*border-radius: 5px 5px 5px 5px;*/
    /*padding:0px 15px 15px 0px;*/
    /*margin-right: 15px;*/
    padding: 10px 15px;
    font-size: 1em;
    font-family: 微软雅黑;
  }
  /*.right-bg section {
    flex: 1;
  }*/
  .right-header {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    height: 40px;
    background: #E3EAF3;
    width: 100%;
    border-radius: 3px;
    padding: 0px 30px;
  }
  .right-header h4 {
    color: #67BA2F;
    display: inline-block;
  }
  .tree-flex {
    height: 100%;
    width: 300px;
    /*width: 60px;*/
    background: #4C637B;
    color: #fff;

  }
  .tree-flex-icon {
    width: 60px;
    /*transition: 0.5s;*/
  }
  .tree-flex h3 {
    text-align: center;
    line-height: 80px;
    margin: 0px;
  }

  .tree-flex-footer {
    height: 180px;
    display: flex;
    flex-direction:column;
    color: #fff;
  }
  .tree-flex-footer a,.tree-flex-footer button{
    height: 60px;
    padding: 15px;
    font-size: 1.3em;
    border-top: 1px solid #697D93;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
  }
  .tree-flex-footer button {
    width: 100%;
    border-radius: 0px;
    background-color: rgba(255,255,255,0);
    border: none;
    border-top: 1px solid #697D93;
    text-align: left;
  }
  .tree-flex-footer button:hover{
    outline: none;
    background-color: rgba(255,255,255,0.2);
  }
  .tree-flex-footer button:focus {
    outline: none;
    background-color: rgba(255,255,255,0.5);
  }
  .tree-flex-footer a:hover {
    color: #FFF;
    background-color: rgba(255,255,255,0.2);
  }
  .btn-group {
    height: 60px!important;
  }

  .tree-flex .dropdown-menu {
    /* 控制显示列表的样式 */
    background: #4C637B;
    border-radius: 0px;
    color: #fff;
    width: auto;
    margin: 0px;
    padding: 0px;
  }
  .tree-flex .tree-flex.dropdown-menu-up {
    /* bottom，top控制上下，left和right控制左右*/
    left: 100%!important;
    top: auto!important;
    bottom: 0;
  }
  .tree-flex .dropdown-menu-down {
    /* bottom，top控制上下，left和right控制左右*/
    left: 100%!important;
    top: 0!important;
  }
  .tree-flex .dropdown-menu li{
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid #697D93;
    font-size: 1.3em;
    width: auto;
    white-space: nowrap;
    cursor: default;

  }
  .tree-flex .dropdown-menu li + li {
    text-align: left;
    border: 0;
    line-height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 1em;
    cursor: pointer;
  }
  .tree-flex .dropdown-menu li + li:hover {
    background-color: rgba(255,255,255,0.2);
  }
  .tree-flex .dropdown-menu li a {
    border: none;
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 1em;
    padding: 0px;
  }
  .tree-flex .dropdown-menu li a:hover {
    color: #fff;
    background-color: rgba(255,255,255,0);
  }
  .tree-flex img{
    height: 30px;
    margin-right: 15px;
  }
  .line {
    height: 100%;
    width: 5px;
    background: #4C637B;
    cursor: e-resize;
  }
  /*为树（tree）组件写的样式*/
  .tree-img {
    font-size: 1.3em;
  }

  /* 滚动条样式 */
  /*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb{
   background-color:rgba(0,0,0,0.2);
   height:50px;
   outline-offset:-2px;
   /*outline:2px solid #fff;*/
   -webkit-border-radius:4px;
   /*border: 2px solid #fff;*/
}

/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover{
   background-color:rgba(0,0,0,0.4);
   height:50px;
   -webkit-border-radius:4px;
}
/*---滚动条大小--*/
::-webkit-scrollbar{
   width:8px;
   height:8px;
}
/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece{
  /* 全透明，不显示 */
   background-color:rgba(255,255,255,0);
   -webkit-border-radius:0;
}
  /*为所有输入框配置一个背景颜色,当获取焦点后颜色变白*/
  input.form-control { height: auto;background: #d7e7f6; }
  input:focus { background:#fff; border: solid 1px #9cb9da; }
  textarea.form-control { height: auto;background: #d7e7f6; }
  textarea:focus { background:#fff; border: solid 1px #9cb9da; }
  select.form-control { height: auto;background: #d7e7f6; }
  select:focus { background:#fff; border: solid 1px #9cb9da; }

    /*表格扩充元素*/
  /*表体的背景颜色*/
  .table-hover {background-color: #bdcde3;}
  /*表头颜色*/
  .table-hover thead tr th {background-color: #93a8cc; padding:5px; border-left:solid 1px #dae4f2; border-top:solid 1px #dae4f2; border-right: none;border-bottom: none; text-align:center; color:white;}
  /*将td元素放大一点*/
  .table-hover > tbody > tr > td{ padding:5px; border-left:solid 1px #dae4f2; border-top:solid 1px #dae4f2; border-right: none;border-bottom: none;}
  /*当鼠标移动到这一行上时的背景颜色，bootstrap也有这个效果，不过颜色不好看*/
  .table-hover > tbody > tr:hover {
    background-color: #a8bad4;
  }

  .list-group {
    margin-bottom: 0px!important;
  }

</style>
